import React, { useEffect, useState } from "react";
import { formatBIData } from "./util";
import { Table, Tabs } from "antd";
// import { Tabs } from "@nutui/nutui-react";
import Chart from "./chart";
import { useTranslation } from "react-i18next";
import styles from "./index.module.less";

interface IProps {
  chatInfo: {
    msgId: string;
    dataId: string;
  };
  theme?: ThemeType;
  language?: AppLanguageType;
  chartData: ChatBIDataType;
  onRender?: (isForce?: boolean) => void;
}

export interface ChatBIDataType {
  chart_type: string;
  x_axis_cloums: string[];
  y_axis_cloums: string[];
  data: Record<string, any>;
}

export interface FormatChatBIDataType {
  typeList: string[];
  chart?: any;
  theme: any;
  table?: {
    header: any[];
    content: any[];
  };
}

const ChatBI: React.FC<IProps> = ({ chatInfo, chartData, theme, onRender }) => {
  const { t } = useTranslation();
  console.log("ChatBI chatInfo ", chatInfo);
  console.log("ChatBI chartData ", chartData);
  // Component State
  const idStr = `chat-bi-component-${chatInfo.msgId}-${chatInfo.dataId}`;
  const [sourceData, setSourceData] = useState<FormatChatBIDataType>();
  const [selectTab, setSelectTab] = useState<string>();
  const onChange = (key: string) => {
    setSelectTab(key);
  };
  const lableMap: Record<string, string> = {
    chart: "数据",
    table: "图表",
  };
  const componentMap: Record<string, any> = {
    chart: <Chart theme={theme as any} options={sourceData?.chart}></Chart>,
    // table: (
    //   <Table
    //     className={styles['chat-bi-table']}
    //     style={{ maxHeight: 250 }}
    //     striped
    //     bordered={false}
    //     columns={sourceData?.table?.header}
    //     data={sourceData?.table?.content}>

    //   </Table>

    // )
    table: (
      <Table
        className={styles["chat-bi-table"]}
        bordered={false}
        columns={sourceData?.table?.header}
        dataSource={sourceData?.table?.content}
        pagination={{
          size: "small",
        }}
      ></Table>
    ),
  };
  useEffect(() => {
    if (chartData) {
      const resData = formatBIData(chartData);
      console.log("resData", resData);
      setSelectTab(resData.typeList[0]);
      setSourceData(resData as any);
    }
  }, [chartData]);
  // Component Effect
  return (
    <div id={idStr} className={styles["chat-bi-component"]}>
      {sourceData && (
        // <ConfigProvider prefixCls={antdConfig.prefixCls} iconPrefixCls={antdConfig.iconPrefixCls} locale={language === 'en-US' ? en_US : zh_CN} >
        // <Tabs
        //   className={styles["chat-bi-Tabs"]}
        //   value={selectTab}
        //   onChange={onChange as any}
        //   activeType="card"
        //   align="left"
        // >
        //   {sourceData.typeList.map((item) => {
        //     return (
        //       <Tabs.TabPane title={lableMap[item]} value={item}>
        //         {componentMap[item]}
        //       </Tabs.TabPane>
        //     );
        //   })}
        // </Tabs>
        <Tabs
          activeKey={selectTab}
          onChange={onChange as any}
          type="card"
          items={sourceData.typeList.map((item) => {
            return {
              label: lableMap[item],
              key: item,
              children: componentMap[item],
            };
          })}
        />
        // </ConfigProvider>
      )}
    </div>
  );
};

export default ChatBI;
